<template>
  <div class="bigbox">
    <div class="SearchBox">
      <div class="leftbox" @click="$router.push('/home')">
        <img
          style="cursor: pointer"
          src="@/assets/image/header/logo.png"
          alt=""
        />
      </div>
      <div class="rightbox">
        <div class="topbutton">
          <div
            class="buttons"
            @click.stop.prevent="isbuttonfocus = !isbuttonfocus"
            :class="isbuttonfocus == true ? 'buttonhover' : ''"
          >
            商品
          </div>
          <div
            class="buttons"
            @click.stop.prevent="isbuttonfocus = !isbuttonfocus"
            :class="isbuttonfocus == false ? 'buttonhover' : ''"
          >
            供应商
          </div>
        </div>
        <div class="bottomsearch">
          <!-- <el-input
            v-model="input"
            placeholder="试试搜：旗袍"
            style="width: 5.07rem"
            @input="change($event)"
          ></el-input> -->
          <el-autocomplete
            v-model="input"
            style="width: 5.07rem; font-size: 0.16rem"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
          ></el-autocomplete>
          <img src="../../static/Imgs/search.png" alt="" class="search" />
          <div class="photobox">
            <img src="../../static/Imgs/photo.png" alt="" class="photo" />
          </div>
          <div class="searchbutton" @click="query">
            <img src="../../static/Imgs/bigsearch.png" alt="" class="search" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectProductName, selectStoreName } from "@/api/home";
export default {
  data() {
    return {
      isbuttonfocus: true,
      input: "",
    };
  },
  created() {},
  methods: {
    querySearchAsync(val, cb) {
      if (this.isbuttonfocus) {
        selectProductName({
          name: val,
        }).then((data) => {
          let arr = [];
          data.data.forEach((item) => {
            let obj = {
              value: item,
            };
            arr.push(obj);
          });
          cb(arr);
        });
      } else {
        console.log(val);
        selectStoreName({
          name: val,
        }).then((data) => {
          let arr = [];
          data.data.forEach((item) => {
            let obj = {
              value: item,
            };
            arr.push(obj);
          });
          cb(arr);
        });
      }
      // var restaurants = this.restaurants;
      // var results = queryString
      //   ? restaurants.filter(this.createStateFilter(queryString))
      //   : restaurants;

      // clearTimeout(this.timeout);
      // this.timeout = setTimeout(() => {
      //   cb(results);
      // }, 3000 * Math.random());
    },
    // 搜索商品
    query() {
      if(this.isbuttonfocus){
        this.$router.push({
        path: "/commodity",
        query: {
          goodsName: this.input,
        },
      });
      }else{
        this.$router.push({
        path: "/storeQuery",
        query: {
          goodsName: this.input,
        },
      });
      }
    
    },
    change(e) {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  border: 0.5px solid #e22a1f !important;
  height: 0.46rem !important;
  padding-left: 0.46rem !important;
  font-family: PingFang SC;
  font-size: 0.14rem;
  border-radius: 0%;
}
.bigbox {
  width: 100vw;
  height: 100%;
  background-color: #fff;
  .SearchBox {
    margin: 0 auto;
    width: 12rem;
    height: 1.21rem;
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .rightbox {
      width: 5.87rem;
      height: 0.72rem;
      display: flex;
      flex-direction: column;
      // justify-content: center;

      // background-color: black;
      .topbutton {
        display: flex;
        margin-left: 0.48rem;
        .buttons {
          width: 0.56rem;
          height: 0.26rem;
          color: #666666;
          font-family: PingFang SC;
          font-size: 0.16rem;
          text-align: center;
          line-height: 0.26rem;
          cursor: pointer;
        }
        .buttonhover {
          background: #e22a1f;
          color: #ffffff;
        }
      }
      .bottomsearch {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        display: flex;
        height: 0.46rem;

        .search {
          position: absolute;
          top: 0.7vw;
          left: 0.5vw;
        }
        .photobox {
          cursor: pointer;
          width: 0.3rem;
          height: 0.3rem;
          background-color: #e22a1f;
          border-radius: 50%;
          position: absolute;
          top: 0.4vw;
          right: 5vw;
          .photo {
            position: absolute;
            top: 0.06rem;
            left: 0.05rem;
            width: 1vw;
          }
        }
        .searchbutton {
          cursor: pointer;
          position: relative;
          width: 0.8rem;
          height: 0.445rem;
          background-color: #e22a1f;
          border: 0.01rem solid rgba(0, 0, 0, 0);
          .search {
            width: 0.24rem;
            height: 0.24rem;
            position: absolute;
            top: 0.1rem;
            left: 0.25rem;
          }
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .SearchBox {
    width: 80% !important;
    margin-top: 0.2rem !important;
  }
  .photo {
    top: 0.3vw !important;
    left: 0.3vw !important;
    width: 1vw;
    height: 1vw;
  }
}
</style>
